/*
 * @Author: hongbin
 * @Date: 2022-11-20 00:06:50
 * @LastEditors: hongbin
 * @LastEditTime: 2022-12-23 15:11:34
 * @Description:用户状态面板
 */
import Link from "next/link";
import { FC } from "react";
import styled, { css } from "styled-components";
import { useAuth } from "../../context/AuthProvide";
import { UserInfo } from "../../hook/useRegisterForm";
import { flexCenter } from "../../styled";
import { Man, Woman } from "../Icon";

interface IProps {
    show: boolean;
    userInfo: Partial<UserInfo>;
    onMouseEnter: () => void;
    onMouseLeave: () => void;
}

const sex = {
    男: <Man />,
    女: <Woman />,
};

const UserState: FC<IProps> = ({ show, userInfo, onMouseEnter, onMouseLeave }) => {
    const { user, signOut } = useAuth();
    return (
        <Container onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} show={show}>
            <h4>
                {userInfo.name} {userInfo.sex ? sex[userInfo.sex] : null}
            </h4>
            <button>
                {/* <Link href="/userProfile">个人中心</Link> */}
                <Link href={`/homepage?id=${user._id}`}>个人中心</Link>
            </button>
            <button onClick={signOut}>退出登陆</button>
        </Container>
    );
};

export default UserState;

const Container = styled.div<{ show: boolean }>`
    position: absolute;
    width: 15vw;
    background: #17610c;
    top: 4vw;
    right: 0;
    border-radius: 1vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 1vh 1vw;
    transition: all 0.3s 0.2s linear;

    ${({ show }) =>
        !show &&
        css`
            opacity: 0;
            visibility: hidden;
        `}

    h4 {
        color: #fffae5;
        cursor: default;
        margin-bottom: 1vh;
        ${flexCenter};
        svg {
            width: 2vw;
            height: 2vw;
        }
    }

    button {
        cursor: pointer;
        border: 1px solid transparent;
        background: transparent;
        transition: 0.3s linear;
        padding: 1vh;
        font-weight: bold;
        color: #b9b9b9;
        :hover {
            color: #fffae5;
            border-top-color: #fffae5;
            border-bottom-color: #fffae5;
        }
    }
`;
